<%@page import="com.wanmait.hotelManagement.vo.Meals"%>
<%@page import="java.util.List"%>
<%@page import="com.wanmait.hotelManagement.vo.Pager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Restaurant</title>
<!-- Stylesheets -->
<link href="<%=path %>/hotel/css/bootstrap.css" rel="stylesheet">
<link href="<%=path %>/hotel/css/style.css" rel="stylesheet">
<!-- Responsive File -->
<link href="<%=path %>/hotel/css/responsive.css" rel="stylesheet">

<link rel="shortcut icon" href="<%=path %>/hotel/images/favicon.png" type="image/x-icon">
<link rel="icon" href="<%=path %>/hotel/images/favicon.png" type="image/x-icon">

<!-- Responsive Settings -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->

<script src="<%=path%>/hotel/js/jquery-3.5.1.min.js" type="text/javascript"></script>

<style type="text/css">
	.item-inner{
		text-overflow: clip;
		height:200px!important;
	}
	
</style>

</head>

<body>

<div class="page-wrapper">
    <!-- Preloader -->
    <div class="preloader"><div class="icon"></div></div>

    <!-- Main Header -->
    <header class="main-header header-style-one">

        <!-- Header Upper -->
     <jsp:include page="/hotel/include/head.jsp"></jsp:include>
        <!--End Header Upper-->

        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="close-btn"><span class="icon flaticon-targeting-cross"></span></div>
            <div class="menu-backdrop"></div>
            <div class="nav-logo"><a href="index.html"><img src="images/nav-logo.png" alt="" title=""></a></div>
            <nav class="menu-box">
                <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
            </nav>
            <div class="nav-bottom">
                <div class="copyright">Hotera  &copy;  2020 All Right Reserved</div>
                <!--Social Links-->
                <div class="social-links">
                    <ul class="clearfix">
                        <li><a href="javascript:void(0);"><span class="fab fa-facebook-f"></span></a></li>
                        <li><a href="javascript:void(0);"><span class="fab fa-twitter"></span></a></li>
                        <li><a href="javascript:void(0);"><span class="fab fa-vimeo-v"></span></a></li>
                    </ul>
                </div>
            </div>
        </div><!-- End Mobile Menu -->

    </header>
    <!-- End Main Header -->


    <!-- Banner Section -->
    <section class="page-banner">
        <div class="image-layer" style="background-image:url(<%=path%>/hotel/images/background/banner-image-8.jpg);"></div>
        <div class="banner-bottom-pattern"></div>

        <div class="banner-inner">
            <div class="auto-container">
                <div class="inner-container clearfix">
                    <h1>餐厅</h1>
                    <div class="page-nav">
                        <ul class="bread-crumb clearfix">
                            <li><a href="<%=path%>/IndexServlet">首页</a></li>
                            <li class="active">餐厅</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Banner Section -->

    <!--Featured Section-->
    <section class="featured-section-five alt-padd">
        <span class="dotted-pattern dotted-pattern-10"></span>
        <div class="circles-two">
            <div class="c-1"></div>
            <div class="c-2"></div>
        </div>
        <div class="auto-container">
            <div class="sec-title centered">
                <h2>我们最受欢迎的菜<br>你爱它!</h2>
                <div class="lower-text">顾客们坐下来就可以享受我们的回扣和活力，还有劳作和生活的乐趣。多年来谁来这里都能惬意享受生活。</div>
            </div>
            <div class="row clearfix" id="foodimages">
             <%List<Meals> allMealsPicture = (List<Meals>)request.getAttribute("allMealsPicture");
                	for(Meals meals:allMealsPicture)
                	{
                %>
                <!--Block-->
                <div class="featured-block-two col-xl-4 col-lg-6 col-md-6 col-sm-12 wow fadeInUp xunHuan" data-wow-delay="0ms" data-wow-duration="1500ms">
                    <div class="inner-box">
                        <div class="image-box">
                            <figure class="image" id="foodimagesOne"><a href="javascript:void(0);"><img class="foodBeautifulImages" src="<%=path%>/hotel/images/foodimages/<%=meals.getFoodPicture()%>" alt="" title=""></a></figure>
                        </div>
                        <div class="cap-box">
                            <div class="cap-inner">
                                <div class="price"><span><%=meals.getFoodPrice()%></span></div>
                                <h5><%=meals.getFoodName()%></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <%} 
                %>
        <!-- 上边分页显示数字开始  -->
        <%-- <div class="shuzi">
 		<%Pager pagerOne = (Pager)request.getAttribute("pagerOne");
            	for(int i=1; i<=pagerOne.getPageCount(); i++)
            	{%>
            		<a class="noOne" href="javascript:void(0);"><%=i%></a>
            	<%}
        %> 
        </div> --%>
 		<!-- 显示数字结束 --> 
                <!--Block-->
                <%-- <div class="featured-block-two col-xl-4 col-lg-6 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1500ms">
                    <div class="inner-box">
                        <div class="image-box">
                            <figure class="image"><a href="#"><img src="<%=path%>/hotel/images/resource/featured-image-52.jpg" alt="" title=""></a></figure>
                        </div>
                        <div class="cap-box">
                            <div class="cap-inner">
                                <div class="price">From <span>$50.00</span></div>
                                <h5>Squeezing Fresh Juice</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Block-->
                <div class="featured-block-two col-xl-4 col-lg-6 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="600ms" data-wow-duration="1500ms">
                    <div class="inner-box">
                        <div class="image-box">
                            <figure class="image"><a href="#"><img src="<%=path%>/hotel/images/resource/<%=meals.getFoodPicture() %>" alt="" title=""></a></figure>
                        </div>
                        <div class="cap-box">
                            <div class="cap-inner">
                                <div class="price">From <span>$50.00</span></div>
                                <h5>Fish with Vegetable</h5>
                            </div>
                        </div>
                    </div>
                </div> --%>
            </div>
            <div class="shuzi1">
 		<%Pager pagerOne = (Pager)request.getAttribute("pagerOne");
            	for(int i=1; i<=pagerOne.getPageCount(); i++)
            	{%>
            		<a class="noOne" href="javascript:void(0);"><%=i%></a>
            	<%}
        %> 
        </div>
        </div>
    </section>

    <!--主菜单-->
    <section class="menu-section">
        <div class="pattern-top"></div>
        <span class="dotted-pattern dotted-pattern-13"></span>
        <span class="tri-pattern tri-pattern-10"></span>
        <div class="auto-container">
            <div class="sec-title centered">
                <h2>主菜单</h2>
                <div class="lower-text">Lorem ipsum dolor坐下来就可以享受eiusmod的回扣和活力，还可以享受劳动和生活的乐趣。多年来谁来这里。</div>
            </div>
            <div class="menu-container">
                <span class="dotted-pattern dotted-pattern-14"></span>
                <div class="row clearfix meals">
                <%List<Meals> allMeals = (List<Meals>)request.getAttribute("allMeals");
                	for(Meals meals:allMeals)
                	{
                %>
                    <!--菜谱-->
                    <div class="menu-item menu-menu col-lg-6 col-md-12 col-sm-12 wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                        <div class="inner-box">
                            <div class="item-inner">
                                <div class="item-price"><span><%=meals.getFoodPrice() %></span></div>
                                <h4><%=meals.getFoodName() %></h4>
                                <div class="text"><%=meals.getContent() %></div>
                            </div>
                            <a href="package-single.html" class="over-link"></a>
                        </div>
                    </div>
              <%} 
              %>
                <!--菜谱-->
                    <%-- <div class="menu-item col-lg-6 col-md-12 col-sm-12 wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1500ms">
                        <div class="inner-box">
                            <div class="item-inner">
                                <div class="item-price"><span>$268</span></div>
                                <h4>红酒烩鸡肉</h4>
                                <div class="text">通常我们在家里制作鸡肉的话，都是将鸡肉制作成小鸡炖蘑菇，红烧鸡块等，在鸡肉当中也可能会添加一些料酒之类的调味酒，但是很少会往鸡肉当中加入红酒，这也是五星级酒店制作的菜肴和自己制作的菜肴的一个差别。</div>
                            </div>
                            <a href="package-single.html" class="over-link"></a>
                        </div>
                    </div>
                    <!--Block-->
                    <div class="menu-item col-lg-6 col-md-12 col-sm-12 wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                        <div class="inner-box">
                            <div class="item-inner">
                                <div class="item-price"><span>$199</span></div>
                                <h4>基围虾粉丝煲</h4>
                                <div class="text">基围虾相对来说是一种比较昂贵的虾，它的外形看上去跟明虾是非常相似的，但是基围虾的价格相对会高出很多，一般在五星级酒店当中使用基围虾的频率会更高一些，因为档次会更好一些。</div>
                            </div>
                            <a href="package-single.html" class="over-link"></a>
                        </div>
                    </div>
                    <!--Block-->
                    <div class="menu-item col-lg-6 col-md-12 col-sm-12 wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1500ms">
                        <div class="inner-box">
                            <div class="item-inner">
                                <div class="item-price"><span>$248</span></div>
                                <h4>橙汁啤酒翅根</h4>
                                <div class="text">在制作这道菜的时候，调味料相对来说是比较讲究的，往里面加入了橙汁，所以制作出来的鸡翅跟吃上去有一股非常清香的感觉。</div>
                            </div>
                            <a href="package-single.html" class="over-link"></a>
                        </div>
                    </div>
                    <!--Block-->
                    <div class="menu-item col-lg-6 col-md-12 col-sm-12 wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                        <div class="inner-box">
                            <div class="item-inner">
                                <div class="item-price"><span>$188</span></div>
                                <h4>豆芽菜豆皮卷</h4>
                                <div class="text">豆芽菜豆皮卷，从外观上看是黄颜色的，非常的诱人，所以使用这道菜会给人一种很有食欲的感觉，在制作的过程当中，会使用到鸡蛋，黄瓜，豆芽的一些主要的材料。</div>
                            </div>
                            <a href="package-single.html" class="over-link"></a>
                        </div>
                    </div>
                    <!--Block-->
                    <div class="menu-item col-lg-6 col-md-12 col-sm-12 wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1500ms">
                        <div class="inner-box">
                            <div class="item-inner">
                                <div class="item-price"><span>$399</span></div>
                                <h4>醉鸡腿</h4>
                                <div class="text">醉鸡腿主要就是由鸡肉制作而成的，一般在五星级酒店当中制作这道菜的时候，会采用土鸡腿，土鸡腿当中的营养价值会比本鸡当中的营养价值要更高一些，而且口感差异也是非常明显的。</div>
                            </div>
               --%>
                            <a href="package-single.html" class="over-link"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="shuzi">
        <!-- 分页显示数字开始  -->
 		<%Pager pager = (Pager)request.getAttribute("pager");
            	for(int i=1; i<=pager.getPageCount(); i++)
            	{%>
            		<a class="no" href="javascript:void(0);"><%=i%></a>
            	<%}
        %> 
 		<!-- 显示数字结束 --> 
 		<!-- 给分页数字添加事件 -->
 		<script type="text/javascript">
 		$(function(){
 			$(".no").click(function(){
 				var num = $(this).html();
 				//点击的是数字 num是数字
 				//利用ajax访问MealsServlet 执行getAllMeals
 				$.ajax({
 					url:"<%=path%>/MealsServlet",
 					type:"post",
 					data:{"action":"getAllMeals","pageNo":num},
 					success:function(mes){
 						//mes存放的是list.jsp文件的内容
 						$(".meals").html(mes);
 					}
 				});
 			});
 		});
 		</script>
 		<!-- 事件结束 -->
      </div>
    </section>
   <jsp:include page="/hotel/include/footer.jsp"></jsp:include>
</div>
<!--End pagewrapper--><!--Scroll to top--><div class="scroll-to-top scroll-to-target" data-target="html"><span class="flaticon-up-arrow"></span></div>

<script src="<%=path %>/hotel/js/jquery.js"></script>
<script src="<%=path %>/hotel/js/popper.min.js"></script>
<script src="<%=path %>/hotel/js/bootstrap.min.js"></script>
<script src="<%=path %>/hotel/js/jquery-ui.js"></script>
<script src="<%=path %>/hotel/js/jquery.fancybox.js"></script>
<script src="<%=path %>/hotel/js/owl.js"></script>
<script src="<%=path %>/hotel/js/scrollbar.js"></script>
<script src="<%=path %>/hotel/js/appear.js"></script>
<script src="<%=path %>/hotel/js/wow.js"></script>
<script src="<%=path %>/hotel/js/custom-script.js"></script>



</body>
</html>
<style type="text/css">
	.shuzi{
		text-align: center;
		width:90px;
		margin:auto;
		padding:5px; 	
	}
	.shuzi1{
		text-align: center;
		width:140px;
		margin:auto;
		padding:7px;
	}
	#foodimagesOne{
		width:350px;
		height:350px;
	}
	#foodimagesOne img{
		width:350px!important;
		height: 264px!important;
	}
</style>
<!-- 图片的分页添加事件 -->
<script type="text/javascript">
	$(function(){
		$(".noOne").click(function(){
			var num1 = $(this).html();
			//点击的是数字 num是数字
			//利用ajax访问MealsServlet 执行getAllMeals
			$.ajax({
				url:"<%=path%>/MealsServlet",
				type:"post",
				data:{"action":"getAllMealsPicture","pageNoOne":num1},
				success:function(mes){
					//mes存放的是list.jsp文件的内容
					$("#foodimages").html(mes);
				}
			});
		});
	});
</script>
<!-- 图片的分页添加事件结束 -->